<template>
  <div v-cloak
       v-if="route.path !== '/home'"
       class="page-title-wrapper"
  >
      <span class="page-title">
        {{ returnRouteName() }}
      </span>
    <router-link class="to-home" to="/home">返回</router-link>
  </div>
  <router-view/>
</template>
<script setup>
import {useRoute} from 'vue-router'

const route = useRoute()

function returnRouteName() {
  const path = route.path
  const title = route?.meta?.title || '案例'
  switch (path) {
    case `${path}`:
      return `${title}`
    default:
      return '案例'
  }
}

</script>
<style lang="stylus">
[v-clock] {
  display none
}

$lightBgc = rgba(1, 23, 58, .6)
$lightBdc = rgba(2, 203, 255, .1)
$lightShadowColor = rgba(2, 203, 255, .2)
$fontColor = #02cbff
$bgc = #050819

#app
  height: 100%;
  //background-color: $bgc
  overflow-x auto
  overflow-y auto

.page-title-wrapper
  width: 100%
  text-align center
  padding-top: 10px;
  position absolute

  .page-title
    background-image: -webkit-linear-gradient(bottom, #1fb9fc, #1d80d2, #1850a7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700
    font-size: 36px
    line-height: 40px
    letter-spacing 10px

  .to-home
    position absolute
    right: 30px
    bottom 10px
    background-color: #0d1b4d
    padding 4px 20px
    -webkit-border-radius: 18px
    -moz-border-radius: 18px
    border-radius: 18px
    cursor pointer

</style>
